import React, { useState, useEffect } from 'react';
import { Tabs ,Form, Input, Button,Space,Table, InputNumber, Popconfirm, Typography,Modal,Radio } from 'antd';

import { UserOutlined, LockOutlined,PlusOutlined } from '@ant-design/icons';

import {getAuthList} from '../../api/auth'
import SubTableList from '../Mycompon/SubTableList'
import './index.css'
const { TabPane } = Tabs;




//模态框
export default   function ModelFun(props) {
  const{store,dispatch}=props;


    const [isModalVisible, setIsModalVisible] = useState(false);
   const switchva=props.store.switch
   //存入id  名称 状态
   const [fromId,setFormId]=useState("");
   const[fromName,setFromName]=useState("");
   const[fromState,setFromState]=useState("");


   function onChangeId(data){
    
     setFormId(data.target.value);

   }
   function onChangeName(data){
     setFromName(data.target.value);

   }
   function onChangeState(data){

    console.log("状态值",data.target.value);
    setFromState(data.target.value);
   }


  useEffect(()=>{
    setIsModalVisible(switchva);

  },[switchva])
  const showModal = () => {
    setIsModalVisible(true);
    props.dispatch({type:"changeSwitch",name:true})
  };
  
  const handleOk = (data) => {
    const obj={
      id:fromId,
      name:fromName,
      status:fromState
    }

    setIsModalVisible(false);
    props.dispatch({type:"changeSwitch",name:false})
    props.dispatch({type:"addTab",obj:obj});
  };
  
  const handleCancel = () => {
    console.log("点击取消回调");
    setIsModalVisible(false);
    props.dispatch({type:"changeSwitch",name:false})
  };
  
  //模态框里面的表单
  const [form] = Form.useForm();
  const [formLayout, setFormLayout] = useState('horizontal');
  
  const onFormLayoutChange = ({ layout }) => {
    setFormLayout(layout);
  };
  
  const formItemLayout =
    formLayout === 'horizontal'
      ? {
          labelCol: {
            span: 8,
          },
          wrapperCol: {
            span: 14,
          },
        }
      : null;
  const buttonItemLayout =
    formLayout === 'horizontal'
      ? {
          wrapperCol: {
            span: 14,
            offset: 4,
          },
        }
      : null;
   
    return (
      <>
      
      
        <Modal width={800} title="操作配置" visible={isModalVisible} onOk={()=>handleOk()} onCancel={handleCancel}>
  
        <Tabs defaultActiveKey="1" >
         <TabPane tab="基本信息" key="1">
       
          <Form
          // {...formItemLayout}
          layout={formLayout}
          layout="inline"
          form={form}
        //  initialValues={{ layout: formLayout }}
          onValuesChange={onFormLayoutChange}
        >
         
          <Form.Item label="权限标识:">
            <Input onChange={onChangeId}  placeholder="只能由数字字母下划线组成" />
          </Form.Item>
          <Form.Item onChange={onChangeName} label="权限名称:">
            <Input placeholder="" />
          </Form.Item>
        
        <div>
        <Form.Item label="状态" name="layout">
            <Radio.Group onChange={onChangeState}>
              <Radio.Button value="1">启动</Radio.Button>
              <Radio.Button value="">禁用</Radio.Button>
            </Radio.Group>
          </Form.Item>

        </div>
        
  
        </Form>
      </TabPane>
      </Tabs>

      
      <SubTableList store={store} dispatch={dispatch}/>

  
         
        </Modal >
      </>
    );
  };
  